<template>
  <view class="login-container" :style="{height:wh+'px'}" @touchmove.stop.prevent>
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#aa29f0" class="animate__animated animate__heartBeat"></uni-icons>
    <!-- 登录按钮 -->
    <button type="primary" class="btn-login animate__animated animate__backInLeft" open-type="getUserInfo" @getuserinfo="getUserInfo">点击登录</button>
    <!-- 登录提示 -->
    <view class="tips-text animate__animated animate__backInLeft ">
      <view class="tips-text-left" @click="navhome">暂不登录</view>
      <view class="tips-text-right" @click="Agreement">隐私协议</view>
    </view>

    <view>
      <!-- 普通弹窗 -->
      <uni-popup ref="popup">
        <view class="popup-content" :class="{ 'popup-height': type }">
          <my-loginpop></my-loginpop>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  export default {
    name: "my-login",
    props: {
      wh: {
        type: Number,
        default: 750
      }
    },
    data() {
      return {
        type: 'center',
      };
    },
    methods: {
      ...mapMutations('m_user', ['updataUserInfo']),
      // 获取微信用户的基本信息
      getUserInfo(e) {
        // 判断是否获取用户信息成功
        if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！');
        // 获取用户信息成功， e.detail.userInfo 就是用户的基本信息
        this.updataUserInfo(e.detail)
        this.toggle('center')
        uni.showToast({
          icon: 'none',
          title: '如不设置头像昵称，将会为您设定默认头像昵称!',
          mask: false, //透明罩子防止穿透
          duration: 2000
        })
      },
      toggle(type) {
        this.type = type
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup.open(type)
      },
      navhome(){
        uni.switchTab({
          url:'/pages/home/home'
        })
      },
      Agreement(){
        uni.navigateTo({
          url:'/subpkg/my-agreement/my-agreement'
        })
      }
    }
  }
</script>

<style lang="less">
  .login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* 加载背景图 */
    background-image: url(https://pic.imgdb.cn/item/63ea77734757feff33d3538a.jpg);
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-color: #464646;
    
    // 绘制登录盒子底部的半椭圆造型
    &::after {
      content: ' ';
      display: block;
      position: absolute;
      width: 100%;
      height: 40px;
      left: 0;
      bottom: 0;
      background-image: linear-gradient(160deg, #4facfe 20%, #00f2fe 80%);
      border-radius: 100%;
      transform: translateY(50%);
    }

    // 登录按钮的样式
    .btn-login {
      width: 90%;
      border-radius: 100px;
      margin: 15px 0;
      background-image: linear-gradient(160deg, #a200ff 20%, #cf3700 80%);
    }

    // 按钮下方提示消息的样式
    .tips-text {
      font-size: 14px;
      display: flex;
      font-weight: 900;
      border-radius: 10px;
      .tips-text-left{
        margin-right: 5px;
        color: gray;
      }
      .tips-text-right{
        color: #1c7cfa;
      }
    }
  }
</style>
